<template>
	<view class="classify">
		<scroll-view scroll-y class="scroll-view-left">
			<view
				v-for="(item, index) in navData"
				:key="item.id"
				class="left-item"
				:class="{ active: activeId === item.id }"
				@click="changeMenu(item.id)">
				{{ item.name }}
			</view>
		</scroll-view>
		
		<scroll-view scroll-y class="scroll-view-right">
			<view class="right-cont">
				<view v-for="item in rightList" :key="item.id" class="right-item" @click="gotoDetail(item.id)">
					<image :src="item.primary_pic_url"></image>
					<view class="ellipsis">{{ item.name }}</view>
					<view class="price">¥{{ item.retail_price }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				navData: [],
				activeId: null,
				rightList: []
			};
		},
		onLoad() {
			this.queryMenuList();
		},
		methods: {
			changeMenu(id) {
				this.activeId = id;
				this.queryGoodsList(id);
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_detail/goods_detail?id=${id}`
				});
			},
			queryMenuList() {
				request({url: 'category/categoryNav?id=1005000'}).then(res => {
					this.navData = res.navData;
					this.activeId = res.navData[0].id;
					this.queryGoodsList(this.activeId);
				});
			},
			queryGoodsList(categoryId) {
				request({
					url: 'goods/goodsList',
					data: {
						categoryId
					}
				}).then(res => {
					this.rightList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
.classify {
	display: flex;
	height: 100vh;
	.scroll-view-left {
		flex-shrink: 0;
		width: 200rpx;
		background-color: #eee;
		font-size: 26rpx;
		line-height: 120rpx;
		text-align: center;
		.left-item {
			position: relative;
			&.active {
				background-color: #fff;
				&::before {
					position: absolute;
					content: '';
					left: 0;
					top: 30rpx;
					width: 4rpx;
					height: 60rpx;
					background-color: #c00;
				}
			}
		}
	}
	.scroll-view-right {
		flex: 1;
		padding: 0 20rpx;
		box-sizing: border-box;
		.right-cont {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			font-size: 26rpx;
			line-height: 1.5;
			.right-item {
				width: 50%;
				image {
					width: 100%;
					height: 256rpx;
				}
				.ellipsis {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price {
					color: #c00;
				}
			}
		}
	}
}
</style>
